<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<title></title>

<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="static/css/font-awesome.min.css" />
<link rel="stylesheet" href="static/css/ace.min.css" />
<link rel="stylesheet" href="static/css/ace-responsive.min.css" />
<link rel="stylesheet" href="static/css/ace-skins.min.css" />
<link rel="stylesheet" media="screen" type="text/css" href="plugins/zoomimage/css/zoomimage.css" />
<link rel="stylesheet" media="screen" type="text/css" href="plugins/zoomimage/css/custom.css" />
<script type="text/javascript" src="plugins/zoomimage/js/jquery.js"></script>
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<!--查看图片插件 -->

<script type="text/javascript" src="plugins/zoomimage/js/eye.js"></script>
<script type="text/javascript" src="plugins/zoomimage/js/utils.js"></script>
<script type="text/javascript" src="plugins/zoomimage/js/zoomimage.js"></script>
<script type="text/javascript" src="plugins/zoomimage/js/layout.js"></script>
<!--查看图片插件 -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/ace-elements.min.js"></script>
<script type="text/javascript" src="static/js/ace.min.js"></script>
<!--引入弹窗组件start-->
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<!--引入弹窗组件end-->
<script type="text/javascript">
	$(top.hangge());

	//显示加载进度
	function jzts() {
		$("#jzts").show();
	}
	
	$(function() {
		//$('#myTab a:first').tab('show');//初始化显示哪个tab 
		var showLogoPlane = $("#showLogoPlane").val();
		if(showLogoPlane != null && showLogoPlane == 'true'){
			$('#myTab a[href="#logo"]').tab('show');
			//alert("LOGO上传成功！");
		}
		
		var showPlans = $("#showPlans").val();
		if(showPlans != null && showPlans == 'true'){
			$('#myTab a[href="#profile"]').tab('show');
			//alert("LOGO上传成功！");
		}
		
		var showFrontCover = $("#showFrontCover").val();
		if(showFrontCover != null && showFrontCover == 'true'){
			$('#myTab a[href="#frontCover"]').tab('show');
			//alert("LOGO上传成功！");
		}
		
		$('#myTab a').click(function(e) {
			e.preventDefault();//阻止a链接的跳转行为 
			$(this).tab('show');//显示当前选中的链接及关联的content 
		});
	});
	
	//保存基本信息
	function saveBaseInfo(){
		if($("#organname").val()=="" || $("#organname").val()=="此酒吧名称已存在!"){
			$("#organname").tips({
				side:3,
	            msg:'输入酒吧名称',
	            bg:'#AE81FF',
	            time:2
	        });
			
			$("#organname").focus();
			$("#organname").val('');
			$("#organname").css("background-color","white");
			return false;
		}else{
			$("#organname").val(jQuery.trim($('#organname').val()));
		}
		
		if($("#nickname").val()==""){
			$("#nickname").tips({
				side:3,
	            msg:'输入姓名',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#nickname").focus();
			return false;
		}
		
		var myreg = /^(((13[0-9]{1})|15[0-9]{1}|18[0-9]{1}|14[0-9]{1})+\d{8})$/;
		var myreg2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
		if($("#phonenumber").val()==""){
			$("#phonenumber").tips({
				side:3,
	            msg:'输入电话号码',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#phonenumber").focus();
			return false;
		}else if( !(myreg.test($("#phonenumber").val()) || myreg2.test($("#phonenumber").val())) ){
			$("#phonenumber").tips({
				side:3,
	            msg:'电话号码格式不正确',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#phonenumber").focus();
			return false;
		}
		
		/* if($("#email").val()==""){
			$("#email").tips({
				side:3,
	            msg:'输入邮箱',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#email").focus();
			return false;
		}else if(!ismail($("#email").val())){
			$("#email").tips({
				side:3,
	            msg:'邮箱格式不正确',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#email").focus();
			return false;
		} */
		
		var plotting_scale = $("#plotting_scale").val();
		if(plotting_scale!=""){
			if(isNaN(plotting_scale)){
				$("#plotting_scale").tips({
					side:3,
		            msg:'比例尺必须是数值',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#plotting_scale").focus();
				return false;
			}
		}
		
		var organ_plane_length = $("#organ_plane_length").val();
		if(organ_plane_length!=""){
			if(isNaN(organ_plane_length)){
				$("#organ_plane_length").tips({
					side:3,
		            msg:'平面图长度必须是数值',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#organ_plane_length").focus();
				return false;
			}
		}
		
		var organ_plane_width = $("#organ_plane_width").val();
		if(organ_plane_width!=""){
			if(isNaN(organ_plane_width)){
				$("#organ_plane_width").tips({
					side:3,
		            msg:'平面图宽度必须是数值',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#organ_plane_width").focus();
				return false;
			}
		}
		
		$.ajax( {
			type :'post',
			url :'commercial/editCommercialBaseInfo.do',
			data: $("#commercailBaseInfoForm").serialize(),
			success: function(data) {  
                alert("酒吧基础资料修改成功！");
            },  
            error: function(data) {  
                alert(data);  
            }  
		});
		
		//$("#commercailBaseInfoForm").submit();
		//$("#centerOfMainFrame").hide();
		//$("#centerOfMainFrame2").show();
	}
	
	function ismail(mail){
		return(new RegExp(/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/).test(mail));
	}
	
	$(document).ready(function(){
		var provincecode = $("#hiddenProvinceCode").val();
		var citycode = $("#hiddenCityCode").val();
		var areacode = $("#hiddenAreaCode").val();
		getProvince(provincecode, citycode, areacode);
	});
	
	function getProvince(provincecode, citycode, areacode) {
			$.ajax( {
				type :'post',
				url :'site/queryAllProvinceList.json',
				dataType :'json',
				success : function(result) {
					if(provincecode != null && provincecode != '' && provincecode != '0'){
						$.each(result.provinceList, function(entryIndex, entry) {
							if(provincecode == entry.provincecode){
								var html = "<option value='" + entry.provincecode + "' selected>"
										+ entry.provincename + "</option>";
								$("#selprovince").append(html);
							}else{
								var html = "<option value='" + entry.provincecode + "'>"
								+ entry.provincename + "</option>";
								$("#selprovince").append(html);
							}
						});
					}else{
						$.each(result.provinceList, function(entryIndex, entry) {
							var html = "<option value='" + entry.provincecode + "'>"
									+ entry.provincename + "</option>";
							$("#selprovince").append(html);
						});
					}
				}
			});
			
			if(provincecode != null && provincecode != '' && provincecode != '0'){
				getCity(provincecode, citycode, areacode);
			}
		}

		function getCity(provincecode, citycode, areacode) {
			if(provincecode != null && provincecode != '' && provincecode != '0'){
				var object = provincecode;
				$.ajax( {
					type :'post',
					url :'site/queryAllCityListByProvinceCode/'+object+'.json',
					dataType :'json',
					success : function(result) {
						if(citycode != null && citycode != '' && citycode != '0'){
							$.each(result.cityList, function(entryIndex, entry) {
								if(citycode == entry["citycode"]){
									var html = "<option value='" + entry["citycode"] + "' selected>"
											+ entry["cityname"] + "</option>";
									$("#selcity").append(html);
								}else{
									var html = "<option value='" + entry["citycode"] + "'>"
									+ entry["cityname"] + "</option>";
									$("#selcity").append(html);
								}
							});
						}else{
							$.each(result.cityList, function(entryIndex, entry) {
								var html = "<option value='" + entry["citycode"] + "'>"
										+ entry["cityname"] + "</option>";
								$("#selcity").append(html);
							});
						}
					}
				});
				
				if(citycode != null && citycode != '' && citycode != '0'){
					getArea(citycode, areacode);
				}
			}else{
				$("#selcity option[value!=0]").remove();
				$("#selarea option[value!=0]").remove();
				var object = $("#selprovince");
				if (object.val() != 0) {
					$.ajax( {
						type :'post',
						url :'site/queryAllCityListByProvinceCode/'+object.val()+'.json',
						dataType :'json',
						success : function(result) {
							$.each(result.cityList, function(entryIndex, entry) {
								var html = "<option value='" + entry["citycode"] + "'>"
										+ entry["cityname"] + "</option>";
								$("#selcity").append(html);
							});
						}
					});
				}
			}
		}

		function getArea(citycode, areacode) {
			if(citycode != null && citycode != '' && citycode != '0'){
				var object = citycode;
				$.ajax( {
					type :'post',
					url :'site/queryAllAreaListByCityCode/'+object+'.json',
					dataType :'json',
					success : function(result) {
						if(areacode != null && areacode != '' && areacode != '0'){
							$.each(result.areaList, function(entryIndex, entry) {
								if(areacode == entry["areacode"]){
									var html = "<option value='" + entry["areacode"] + "' selected>"
											+ entry["areaname"] + "</option>";
									$("#selarea").append(html);
								}else{
									var html = "<option value='" + entry["areacode"] + "'>"
									+ entry["areaname"] + "</option>";
									$("#selarea").append(html);
								}
							});
						}else{
							$.each(result.areaList, function(entryIndex, entry) {
								var html = "<option value='" + entry["areacode"] + "'>"
										+ entry["areaname"] + "</option>";
								$("#selarea").append(html);
							});
						}
					}
				});
			}else{
				$("#selarea option[value!=0]").remove();
				var object = $("#selcity");
				if (object.val() != 0) {
					$.ajax( {
						type :'post',
						url :'site/queryAllAreaListByCityCode/'+object.val()+'.json',
						dataType :'json',
						success : function(result) {
							$.each(result.areaList, function(entryIndex, entry) {
								var html = "<option value='" + entry["areacode"] + "'>"
										+ entry["areaname"] + "</option>";
								$("#selarea").append(html);
							});
						}
					});
				}
			}
		}
		
		function saveCommercialPosition(){
			if($("#longitude").val()=="" || $("#longitude").val()== null){
				$("#longitude").tips({
					side:3,
		            msg:'输入经度',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#longitude").focus();
				return false;
			}else{
				var longitude = $("#longitude").val();
				
				if(isNaN(longitude)){
					$("#longitude").tips({
						side:3,
			            msg:'经度必须是数值',
			            bg:'#AE81FF',
			            time:3
			        });
					$("#longitude").focus();
					return false;
				}
				
				if(parseFloat(longitude) > 180){
					$("#longitude").tips({
						side:3,
			            msg:'经度不能大于180',
			            bg:'#AE81FF',
			            time:3
			        });
					$("#longitude").focus();
					return false;
				}
			}
			
			if($("#latitude").val()==""){
				$("#latitude").tips({
					side:3,
		            msg:'输入纬度',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#latitude").focus();
				return false;
			}else{
				var latitude = $("#latitude").val();
				//alert(!isNaN(latitude));
				if(isNaN(latitude)){
					$("#latitude").tips({
						side:3,
			            msg:'纬度必须是数值',
			            bg:'#AE81FF',
			            time:3
			        });
					$("#latitude").focus();
					return false;
				}
				
				if(parseFloat(latitude) > 90){
					$("#latitude").tips({
						side:3,
			            msg:'纬度不能大于90',
			            bg:'#AE81FF',
			            time:3
			        });
					$("#latitude").focus();
					return false;
				}
			}
			
			$.ajax( {
				type :'post',
				url :'commercial/editCommercialPosition.do',
				data: $("#commercailPositionForm").serialize(),
				success: function(data) {  
	                alert("位置信息提交成功！");
	            },  
	            error: function(data) {  
	                alert(data);  
	            }  
			});
		}
		
		//新增
		function addLogo(organid){
			 top.jzts();
			 var diag = new top.Dialog();
			 diag.Drag=true;
			 diag.Title ="新增";
			 diag.URL = '<%=basePath%>/commercial/goAddLogo.do?organid=' + organid;
			 diag.Width = 800;
			 diag.Height = 490;
			 diag.CancelEvent = function(){ //关闭事件
			 	top.jzts();
			 	//setTimeout("self.location=self.location",100);
			 	 window.location.href='<%=basePath%>/commercial/showCommercialBaseInfo.do?showLogoPlane=true';
				diag.close();
			 };
			 diag.show();
		}
		
		//平面图
		function addPlans(organid){
			 top.jzts();
			 var diag = new top.Dialog();
			 diag.Drag=true;
			 diag.Title ="新增";
			 diag.URL = '<%=basePath%>/commercial/goAddPlans.do?organid=' + organid;
			 diag.Width = 800;
			 diag.Height = 490;
			 diag.CancelEvent = function(){ //关闭事件
			 	top.jzts();
			 	//setTimeout("self.location=self.location",100);
			 	 window.location.href='<%=basePath%>/commercial/showCommercialBaseInfo.do?showPlans=true';
				diag.close();
			 };
			 diag.show();
		}
		
		//封面图
		function addFrontCover(organid){
			 top.jzts();
			 var diag = new top.Dialog();
			 diag.Drag=true;
			 diag.Title ="新增";
			 diag.URL = '<%=basePath%>/commercial/goAddFrontCover.do?organid=' + organid;
			 diag.Width = 800;
			 diag.Height = 490;
			 diag.CancelEvent = function(){ //关闭事件
			 	top.jzts();
			 	//setTimeout("self.location=self.location",100);
			 	 window.location.href='<%=basePath%>/commercial/showCommercialBaseInfo.do?showFrontCover=true';
				diag.close();
			 };
			 diag.show();
		}
		
</script>
</head>

<body>
	<div class="container-fluid" id="main-container">
		<div id="breadcrumbs">
			<ul class="breadcrumb">
				<li><i class="icon-home"></i> <a>商户管理</a> <span class="divider">
						<i class="icon-angle-right"></i>
				</span></li>
				<li class="active">酒吧基础资料</li>
			</ul>
			<!--.breadcrumb-->
		</div>
		<div id="page-content">
			<div class="row-fluid">
				<ul class="nav nav-tabs" id="myTab"> 
			      <li class="active" style="font-size: 14px;"><a href="#home">基础资料</a></li> 
			      <li style="font-size: 14px;"><a href="#logo">酒吧LOGO</a></li>
			      <li style="font-size: 14px;"><a href="#profile">酒吧平面图</a></li> 
			      <li style="font-size: 14px;"><a href="#frontCover">酒吧封面图</a></li>
			      <li style="font-size: 14px;"><a href="#messages">酒吧位置信息</a></li> 
			    </ul> 
			       
			    <div class="tab-content"> 
			      	<div class="tab-pane active" id="home">
						<form action="commercial/editCommercialBaseInfo.do" name="commercailBaseInfoForm" id="commercailBaseInfoForm" method="post">
						<input type="hidden" name="organid" id="organid" value="${pageData.organid }"/>
						<input type="hidden" name="hiddenProvinceCode" id="hiddenProvinceCode" value="${pageData.provincecode }"/>
						<input type="hidden" name="hiddenCityCode" id="hiddenCityCode" value="${pageData.citycode }"/>
						<input type="hidden" name="hiddenAreaCode" id="hiddenAreaCode" value="${pageData.areacode }"/>
						<div id="centerOfMainFrame">
							<table>
								<tr>
									<td>酒吧名称：<input type="text" name="organname" id="organname" maxlength="32" placeholder="这里输入酒吧名称" value="${pageData.organname }" title="酒吧名称"/></td>
								</tr>
								<tr>
									<td>酒吧简称：<input type="text" name="abbrname" id="abbrname"  maxlength="32" placeholder="这里输入酒吧简称" value="${pageData.abbrname }" title="酒吧简称"/></td>
								</tr>
								<tr>
									<td>
										<div>
										酒吧地址：
											<select id="selprovince" name="provincecode" style="width:100px; font-size:12px;" onchange="getCity('','','')">
												<option value="0">-请选择省份-</option>
											</select>
											<select id="selcity" name="citycode" style="width:100px; font-size:12px;" onchange="getArea('','')">
												<option value="0">-请选择城市-</option>
											</select>
											<select id="selarea" name="areacode" style="width:100px; font-size:12px;">
												<option value="0">-请选择地区-</option>
											</select>
										</div>
									</td>
								</tr>
								<tr>
									<td><input type="text" name="address" id="address"  maxlength="32" placeholder="这里输入酒吧地址" value="${pageData.address }" title="酒吧地址" style="margin-left: 66px;"/></td>
								</tr>
								<tr>
									<td>邮箱地址：<input type="email" name="email" id="email"  maxlength="32" placeholder="这里输入邮箱" title="邮箱" value="${pageData.email }" /></td>
								</tr>			
								<tr>
									<td>联系电话：<input type="text" name="phonenumber" id="phonenumber"  maxlength="32" placeholder="这里输入联系电话" value="${pageData.phonenumber }" title="联系电话"/></td>
								</tr>
								<tr>
									<td>酒吧描述：<textarea name="introduction" id="introduction" cols="200" rows="10" placeholder="这里输入酒吧描述" style="margin: 0px 0px 10px; width: 308px; height: 228px;">${pageData.introduction } </textarea></td>
								</tr>
								<tr>
									<td>平面图长：<input type="text" name="organ_plane_length" id="organ_plane_length" maxlength="32" value="${pageData.organ_plane_length }" title="酒吧平面图长度"/></td>
								</tr>
								<tr>
									<td>平面图宽：<input type="text" name="organ_plane_width" id="organ_plane_width" maxlength="32" value="${pageData.organ_plane_width }" title="酒吧平面图宽度"/></td>
								</tr>
								<tr>
									<td>平面图比例尺：<input type="text" name="plotting_scale" id="plotting_scale" maxlength="32" value="${pageData.plotting_scale }" title="平面图比例尺"/></td>
								</tr>
								<tr>
									<td style="text-align: center;">
										<a class="btn btn-mini btn-primary" onclick="saveBaseInfo();">提交</a>
										<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
									</td>
								</tr>
							</table>
						</div>
						</form>
					</div> 
			      	<div class="tab-pane" id="logo">
						<input type="hidden" name="showLogoPlane" id="showLogoPlane" value="${pd.showLogoPlane }"/>
						<div id="centerOfMainFrame_front_cover">
							<table>
								<tr>
									<c:if test="${pageData.organlogo == null}">
										酒吧平面图暂时没有上传！
									</c:if>
									<c:if test="${pageData.organlogo != null}">
										<a href="<%=basePath%>${pageData.organlogo}" title="酒吧LOGO" class="bwGal"><img src="<%=basePath%>${pageData.organlogo}" alt="酒吧LOGO" width="400"></a>
									</c:if>
								</tr>
								<tr>
									<td style="text-align: center;">
										<a class="btn btn-mini btn-primary" onclick="addLogo('${pageData.organid}');" style="width:100px;font-size: 14px;">上传LOGO</a>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab-pane" id="profile">
						<input type="hidden" name="showPlans" id="showPlans" value="${pd.showPlans }"/>
						<div id="centerOfMainFrame_plan">
							<table>
								<tr>
									<c:if test="${pageData.organplane == null}">
										酒吧平面图暂时没有上传！
									</c:if>
									<c:if test="${pageData.organplane != null}">
										<a href="<%=basePath%>${pageData.organplane}" title="酒吧平面图" class="bwGal"><img src="<%=basePath%>${pageData.organplane}" alt="酒吧平面图" width="400"></a>
									</c:if>
								</tr>
								<tr>
									<td style="text-align: center;">
										<a class="btn btn-mini btn-primary" onclick="addPlans('${pageData.organid}');" style="width:100px;font-size: 14px;">上传平面图</a>
									</td>
								</tr>
							</table>
						</div>
					</div> 
					<div class="tab-pane" id="frontCover">
						<input type="hidden" name="showFrontCover" id="showFrontCover" value="${pd.showFrontCover }"/>
						<div id="centerOfMainFrame_front_cover">
							<table>
								<tr>
									<c:if test="${pageData.organfrontcover == null}">
										酒吧平面图暂时没有上传！
									</c:if>
									<c:if test="${pageData.organfrontcover != null}">
										<a href="<%=basePath%>${pageData.organfrontcover}" title="酒吧封面图" class="bwGal"><img src="<%=basePath%>${pageData.organfrontcover}" alt="酒吧封面图" width="400"></a>
									</c:if>
								</tr>
								<tr>
									<td style="text-align: center;">
										<a class="btn btn-mini btn-primary" onclick="addFrontCover('${pageData.organid}');" style="width:100px;font-size: 14px;">上传封面图</a>
									</td>
								</tr>
							</table>
						</div>
					</div> 
			      	<div class="tab-pane" id="messages">
			      		<form action="commercial/editCommercialPosition.do" name="commercailPositionForm" id="commercailPositionForm" method="post">
			      		<input type="hidden" name="organid" id="organid" value="${pageData.organid }"/>
						<div id="centerOfMainFrame_position">
							<table>
								<tr>
									<td>经度：<input type="text" name="longitude" id="longitude" maxlength="32" value="${positionPageData.longitude }" title="经度"/></td>
									<th>
									<td>纬度：<input type="text" name="latitude" id="latitude" maxlength="32" value="${positionPageData.latitude }" title="纬度"/></td>
								</tr>
								<tr>
									<td style="text-align: center;">
										<a class="btn btn-mini btn-primary" onclick="saveCommercialPosition();">提交</a>
										<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
									</td>
								</tr>
							</table>
						</div>
						</form>
					</div> 
			    </div> 
				<!--/row-->
			</div>
		</div>
		<!--/#page-content-->
	</div>
	<!--/.fluid-container#main-container-->
</body>
</html>